<template>
  <transition name="fade">
    <div class="xrk-message-box" :class="className" v-if="visible">
      <div
        class="xrk-message-container animation-scale"
        :class="{ 'animation-grow': animationShow }"
        :style="{ width }"
      >
        <div class="title" v-if="title">
          {{ title }}
        </div>
        <div class="message-content">
          <div
            class="message"
            style="white-space: pre-line"
            :style="{ 'text-align': messageAlign }"
            v-html="message"
          ></div>
        </div>
        <div class="message-foot" v-if="showConfirmButton || showCancelButton">
          <div
            class="message-btn"
            :style="{ color: cancelButtonColor }"
            v-if="showCancelButton"
            @click="cancel"
          >
            <span
              class="message-text"
              :class="{ 'animation-loading': asyncLoadingByCancel }"
              :style="{
                'border-color': asyncLoadingByCancel ? cancelButtonColor : '',
              }"
            >
              {{ cancelButtonText }}
            </span>
          </div>
          <div
            class="message-btn"
            :class="{
              'cirm-btn': showCancelButton,
            }"
            :style="{ color: confirmButtonColor }"
            v-if="showConfirmButton"
            @click="confirm"
          >
            <span
              class="message-text"
              :class="{ 'animation-loading': asyncLoadingByComfirm }"
              :style="{
                'border-color': asyncLoadingByComfirm ? confirmButtonColor : '',
              }"
            >
              {{ confirmButtonText }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import props from "./props";
export default {
  name: "XrkMessageBox",
  data() {
    return {
      visible: false,
      animationShow: false,
      asyncLoadingByComfirm: false,
      asyncLoadingByCancel: false,
      resolve: Function,
      rejiect: Function,
      removeCache: Function,
    };
  },
  props: {
    ...props,
  },
  methods: {
    showBox(cb) {
      this.removeCache = cb;
      this.visible = true;
      return new Promise((resolve, rejiect) => {
        this.resolve = resolve;
        this.rejiect = rejiect;
      });
    },
    cancel() {
      if (typeof this.beforeClose === "function") {
        setTimeout(() => {
          this.asyncLoadingByCancel = true;
        });
        return this.beforeClose("cancel", () => {
          this.rejiect("cancel");
          this.hide();
        });
      }
      this.rejiect("cancel");
      this.hide();
    },
    confirm() {
      if (typeof this.beforeClose === "function") {
        setTimeout(() => {
          this.asyncLoadingByComfirm = true;
        });
        return this.beforeClose("confirm", () => {
          this.hide();
          this.resolve("confirm");
        });
      }
      this.resolve("confirm");
      this.hide();
    },
    hide() {
      this.animationShow = false;
      setTimeout(() => {
        this.visible = false;
      });
      setTimeout(() => {
        document.body.removeChild(this.$el);
        this.$destroy();
      }, 1000);
    },
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.animationShow = true;
      });
    });
  },
  beforeDestroy() {
    this.removeCache();
  },
};
</script>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  background-color: rgba(0, 0, 0, 0.7);
  transition: all 0.6s;
}
.fade-enter,
.fade-leave-to {
  background-color: rgba(0, 0, 0, 0) !important;
}

.xrk-message-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.7);
  .xrk-message-container {
    position: absolute;
    top: 50%;
    left: 50%;
    padding-top: 26px;
    background-color: #fff;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.6s;
    .title {
      padding-bottom: 10px;
      font-size: 16px;
      color: #323233;
      text-align: center;
    }
    .message {
      max-height: 60vh;
      padding: 0px 24px 26px;
      overflow-y: auto;
      font-size: 14px;
      line-height: 20px;
      word-wrap: break-word;
      color: #646566;
    }
    .message-foot {
      position: relative;
      display: flex;
      overflow: hidden;
      width: 100%;
      &::after {
        position: absolute;
        box-sizing: border-box;
        content: " ";
        pointer-events: none;
        top: 0;
        left: -50%;
        right: -50%;
        height: 1px;
        background-color: #d6d8db;
        transform: scale(0.5);
      }
      .message-btn {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        height: 48px;
        font-size: 16px;
        &:active {
          background-color: rgba(0, 0, 0, 0.1);
        }
      }
      .message-text {
        height: 50%;
        line-height: 24px;
        &.animation-loading {
          color: transparent;
          border-radius: 50%;
          width: 28px;
          height: 28px;
          border-left: 2px solid #333;
          border-bottom: 2px solid #333;
          border-top: 2px solid transparent !important;
          border-right: 2px solid transparent !important;
          animation: rotate 0.5s linear infinite;
        }
      }
      .cirm-btn::after {
        content: "";
        position: absolute;
        box-sizing: border-box;
        left: 0;
        width: 1px;
        top: -50%;
        bottom: -50%;
        background-color: #d6d8db;
        pointer-events: none;
        transform: scale(0.5);
      }
    }
  }
}
.animation-scale {
  transform: translate(-50%, -50%) scale(0.1);
}
.animation-grow {
  transform: translate(-50%, -50%) scale(1);
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>